<template>
  <div class="menu">
    <!-- 搜索 -->
    <van-search placeholder="请输入搜索关键词" shape="round" disabled @click="search"/>
    <van-tabs
      v-model="active"
      swipeable
      :lazy-render="true"
      @rendered="classification"
      animated
    >
      <van-tab v-for="(item, i) in titleData" :key="i" :title="item.title">
        <template #title>
          <img :src="active == i ? item.icon.active : item.icon.inactive" />
          <div>{{ item.title }}</div>
        </template>
        <div><Coffee :coffee="item.coffeelist"></Coffee></div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import "../assets/less/menu.less";
import Coffee from "../components/coffee";
export default {
  name: "Menu",
  data() {
    return {
      active: 0,
      value: "",
      //title
      titleData: [
        {
          title: "推荐",
          icon: {
            active: require("../assets/img/奶茶-active.png"),
            inactive: require("../assets/img/奶茶.png"),
          },
          coffeelist:[]
        },
        {
          title: "拿铁",
          icon: {
            active: require("../assets/img/拿铁-active.png"),
            inactive: require("../assets/img/拿铁.png"),
          },
          coffeelist: []
        },
        {
          title: "咖啡",
          icon: {
            active: require("../assets/img/咖啡-active.png"),
            inactive: require("../assets/img/咖啡.png"),
          },
          coffeelist: []
        },
        {
          title: "瑞纳冰",
          icon: {
            active: require("../assets/img/冰淇淋-active.png"),
            inactive: require("../assets/img/冰淇淋.png"),
          },
          coffeelist: []
        },
      ],
    };
  },
  created() {
    this.getmilkylist();
  },
  components: {
    Coffee,
  },
  methods: {
    //获取数据
    classification(name, title) {
      //   this.$toast.loading({
      //     message: "加载中...",
      //     forbidClick: true,
      //     duration: 0,
      //   });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/search",
        params: {
          appkey: this.appkey,
          name: title,
        },
      }).then((res) => {
        // console.log(name, title)
        if (res.data.code === "Q001") {
          if (name == 1) {
            this.titleData[1].coffeelist = res.data.result;
          }
          if (name == 2) {
            this.titleData[2].coffeelist = res.data.result;
          }
          if (name == 3) {
            this.titleData[3].coffeelist = res.data.result;
          }
        }
      });
    },
    getmilkylist() {
      // this.$toast.loading({
      //   message: "加载中...",
      //   forbidClick: true,
      //   duration: 0,
      // });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      }).then((res) => {
        // console.log(res.data.result);
        if (res.data.code === 500) {
          this.titleData[0].coffeelist = res.data.result;
        }
      });
    },
    //搜索时触发
    search(){
      this.$router.push({name: 'Search'})
    }
  },
};
</script>

<style lang="less" scoped>
</style>